<template>
   <div class="app">
        <navbar class="navbarb">  
            <navbar-item type="back"></navbar-item> 
            <navbar-item type="title">
                <text class="headtext">设置</text>
                
            </navbar-item>
        </navbar>

        <div class="setBox">
            <text class="settip">按照性别在学生端显示学生的学期目标（公里）</text>
            <div class="setitem">
                <div class="left">
                    <text class="seticon">&#xe606;</text>
                    <text class="settext">本学期总里程(男)</text>
                </div>
                <div class="right">
                    <input class="setVal" type="text" placeholder="0">
                    <text class="setP">公里</text>
                </div>
            </div>

            <div class="setitem">
                <div class="left">
                    <text class="seticon">&#xe606;</text>
                    <text class="settext">单次最低</text>
                </div>
                <div class="right">
                    <input class="setVal" type="text" placeholder="0">
                    <text class="setP">公里</text>
                </div>
            </div>
            <div class="setitem">
                <div class="left">
                    <text class="seticon">&#xe606;</text>
                    <text class="settext">单次最高</text>
                </div>
                <div class="right">
                    <input class="setVal" type="text" placeholder="0">
                    <text class="setP">公里</text>
                </div>
            </div>
            <div class="setitem">
                <div class="left">
                    <text class="seticon">&#xe606;</text>
                    <text class="settext">分值设置</text>
                </div>
                <div class="center">
                    <input class="setVal" type="text" placeholder="0">
                    <text class="setLine">-</text>
                    <input class="setVal" type="text" placeholder="0">
                    <text class="setP">公里</text>
                </div>
                <div class="right">
                    <input class="setVal" type="text" placeholder="0">
                    <text class="setP" style="margin-right:25;">分</text>
                </div>
            </div>
            <div class="setitem">
                <div class="left">
                    <text class="seticon">&#xe606;</text>
                    <text class="settext">占平时成绩比例</text>
                </div>
                <div class="right">
                    <input class="setVal" type="text" placeholder="0">
                    <text class="setP" style="margin-right:33;">%</text>
                </div>
            </div>
           
        </div>
         <wxc-checkbox title="在学生端显示成绩"></wxc-checkbox>
    </div> 
</template>
<script>
 import { WxcCheckbox } from 'weex-ui'
export default {
    components: { WxcCheckbox },
    data () {
        return {
            value: 4,
            isDisabled: true,
            isOnlyRead: true
        }
    },
    methods: {
        stepperValueChange (e) {
            console.log(e.value);
        }
    },
    created(){
        // 添加 字体图标
        let domModule = weex.requireModule('dom');
        domModule.addRule('fontFace',{
        'fontFamily': "iconfont",
        'src': "url('http://at.alicdn.com/t/font_1628280_p78f7z67jyq.ttf')"
        })

        
    }
}
</script>
<style scoped>
.navbarb{
        width: 750px;
        height: 100px;
        background-color: #1eb76e;
    }
    .setBox{
        padding-left: 30;
        padding-right: 30;
    }
    .settip{
        height: 100;
        line-height: 100;
        color: #333;
        font-size: 28;
        border-bottom-color: #eaeaea;
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }
    .setitem{
        height: 100;
        border-bottom-color: #e2e2e2;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        align-items: center;
    }
     .headtext {
        font-size: 30px;
        color: #ffffff;
    }
    .seticon{
        width: 60;
        height: 60;
        background-color: #ff5100;
        color: #fff;
        line-height: 60;
        text-align: center;
        font-size: 40;
        font-family: iconfont;
        margin-right: 30;
    }
    .setitem{
        flex-direction: row;
        justify-content: space-between;
    }
    .left{
        flex-direction: row;
       
    }
    .right{
        flex-direction: row;
        
    }
    .settext{
        line-height: 60;
        font-size: 26;
    }
    .setP{
        line-height: 60;
        font-size: 26;
        margin-left: 30;
    }
    .setVal{
        width: 80;
        height: 60;
        background-color: #eaeaea;
        text-align: center;
    }
    .setLine{
        margin-right: 10;
        line-height: 60;
        margin-left: 10;
    }
    .center{
        flex-direction: row;
    }
</style>